<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手写组合API</title>
</head>
<body>
  <script src="./index.js"></script>
  <script type="text/javascript">
    //===================测试shallowReactive和reactive====================
    const proxyUser1 = shallowReactive({
      name:'小明',
      car:{
        color:'red'
      }
    })
    //拦截到了写的数据
    //proxyUser1.name = '小红';
    //打印：拦截了修改数据或者树添加属性 name 小红

    //拦截到了读的数据和写的数据
    //proxyUser1.name += '消息';
    //打印：拦截了读取数据 name 小明，拦截了修改数据或者树添加属性 name 小明消息

    //拦截到了读取数据（拦截不到写，浅拦截）
    //proxyUser1.car.color += '==';
    //打印：拦截了读取数据 car {color: 'red'}

    //拦截到了删除数据
    //delete proxyUser1.name;
    //打印：拦截了删除数据 name

    //只拦截到了读，但是拦截不到删除
    //delete proxyUser1.car.color
    //打印：拦截了读取数据 car {color: 'red'}



    const proxyUser2 = reactive({
      name:'小明',
      car:{
        color:'red'
      }
    })
    //拦截到了写的数据
    //proxyUser2.name = '小红';
    //打印：拦截了修改数据或者树添加属性 name 小红

    //拦截到了读的数据和写的数据
    //proxyUser2.name += '消息';
    //打印：拦截了读取数据 name 小明，拦截了修改数据或者树添加属性 name 小明消息

    //拦截到了读和写的数据
    //proxyUser2.car.color = '==';
    //打印：拦截了读取数据 car Proxy {color: 'red'}
    //打印：拦截了读取数据 color red
    //打印：拦截了修改数据或者树添加属性 color red==

    //拦截到了删除数据
    //delete proxyUser2.name;
    //打印：拦截了删除数据 name

    //拦截到了读和删除
    //delete proxyUser2.car.color
    //打印：拦截了读取数据 car {color: 'red'}
    //打印：拦截了删除数据 color

    //===================测试shallowReadonly和readonly=====================
    const proxyUser3 = shallowReadonly({
      name:"小明",
      cars:['奔驰','宝马']
    })
    //可以读取
    //console.log(proxyUser3.name);
    //打印：拦截到了读取数据 name 小明
    //打印：小明

    //不能修改
    //proxyUser3.name = '==';
    //打印：只能读取数据，不能修改数据或者添加数据

    //不能删除
    //delete proxyUser3.name;
    //打印：只能读取数据，不能删除数据

    //拦截到了读取，拦截不了深度的修改（可修改）
    //proxyUser3.cars[0] = '奥迪';
    //打印：拦截到了读取数据 cars (2) ['奔驰', '宝马']

    //拦截到了读取，拦截不了删除（可删）
    //delete proxyUser3.cars[0];
    //打印：拦截到了读取数据 cars (2) ['奔驰', '宝马']

    const proxyUser4 = readonly({
      name:"小明",
      cars:['奔驰','宝马']
    })
    //拦截到了读取
    //console.log(proxyUser4.name)
    //打印：拦截到了读取数据 name 小明 
    //打印：小明

    //拦截到了读取（深度）
    //console.log(proxyUser4.cars[0])
    //打印：拦截到了读取数据 cars Proxy {0: '奔驰', 1: '宝马'}
    //打印： 拦截到了读取数据 0 奔驰
    //打印：奔驰

    //拦截到了修改
    //proxyUser4.name = '哈哈';
    //打印：只能读取数据，不能修改数据或者添加数据

    //拦截到了修改（深度）
    //proxyUser4.cars[0]='哈哈';
    //打印：拦截到了读取数据 cars Proxy {0: '奔驰', 1: '宝马'}
    //打印：只能读取数据，不能修改数据或者添加数据

    //拦截到了删除数据
    //delete proxyUser4.name;
    //打印：只能读取数据，不能删除数据

    //拦截了读取数据，拦截到了删除数据（深度）
    //delete proxyUser4.cars[0];
    //打印：拦截到了读取数据 cars Proxy {0: '奔驰', 1: '宝马'}
    //打印：只能读取数据，不能删除数据

    //=========================shallowRef 与 ref=========================
    const ref1 = shallowRef({
      name:'小明',
      car:{
        color:'red'
      }
    })
    //console.log(ref1.value);
    //打印：劫持到了读取数据
    //打印：{name: '小明', car: {…}}

    //ref1.value = '==';
    //打印：劫持到了修改数据，准备更新界面 ==

    //劫持不到修改数据
    //ref1.value.car = '==';
    //打印：劫持到了读取数据

    const ref2 = ref({
      name:'小明',
      car:{
        color:'red'
      }
    })
    //console.log(ref2.value);
    //打印：劫持到了读取数据
    //打印：Proxy {name: '小明', car: Proxy}

    //ref2.value = '=='
    //打印：劫持到了修改数据，准备更新界面 ==

    ref2.value.car = '==';
    //打印：劫持到了读取数据
    //打印：拦截了修改数据或者树添加属性 car ==

  </script>
</body>
</html>